import React, { Fragment, useState, useEffect } from 'react';
import { Card, Content, Skeleton, Text } from 'react-fule-ui';

export default function FullCard() {
  const data1 = [
    [
      {
        type: 'rect',
        margin: '0 0 -8px 0',
        width: '100%',
        height: '16px',
      },
    ],
    [
      {
        type: 'rect',
        margin: '0 0 0 0',
        width: '60%',
        height: '16px',
      },
    ],
  ];
  const rowCol = [
    [
      {
        type: 'media',
        border: true,
        items: [
          {
            type: 'circle',
            size: '50px',
          },
          {
            type: 'paragraph',
            width: '100%',
            items: [
              {
                type: 'rect',
                width: '31%',
              },
              {
                type: 'rect',
                width: '60%',
              },
            ],
          },
        ],
      },
      {
        type: 'media',
        border: true,
        items: [
          {
            type: 'circle',
            size: '50px',
          },
          {
            type: 'paragraph',
            width: '100%',
            items: [
              {
                type: 'rect',
                width: '31%',
              },
              {
                type: 'rect',
                width: '60%',
              },
            ],
          },
        ],
      },
      {
        type: 'media',
        border: true,
        items: [
          {
            type: 'circle',
            size: '50px',
          },
          {
            type: 'paragraph',
            width: '100%',
            items: [
              {
                type: 'rect',
                width: '31%',
              },
              {
                type: 'rect',
                width: '60%',
              },
            ],
          },
        ],
      },
      {
        type: 'media',
        border: true,
        items: [
          {
            type: 'circle',
            size: '50px',
          },
          {
            type: 'paragraph',
            width: '100%',
            items: [
              {
                type: 'rect',
                width: '31%',
              },
              {
                type: 'rect',
                width: '60%',
              },
            ],
          },
        ],
      },
    ],
    [
      {
        type: 'rect',
        margin: '0 0 0 0',
        width: '100%',
        height: '20px',
      },
    ],
    [
      {
        type: 'rect',
        width: '240px',
        margin: '0 32px 0 0',
        height: '20px',
      },
      {
        type: 'rect',
        width: 'calc(100% - 32px - 240px)',
        margin: '0 0 0 0',
        height: '20px',
      },
    ],
    [
      {
        type: 'circle',
        size: '50px',
      },
      {
        type: 'rect',
        margin: '0',
        width: 'calc(100% - 170px)',
        height: '20px',
      },
      {
        type: 'rect',
        marginLeft: '20px',
        width: '80px',
        height: '20px',
        content: '确定',
      },
    ],
    [
      {
        type: 'circle',
        size: '50px',
      },
      {
        type: 'paragraph',
        width: '100%',
        items: [
          {
            type: 'rect',
            width: '61%',
          },
        ],
      },
    ],
    [
      {
        type: 'circle',
        size: '50px',
      },
      {
        type: 'paragraph',
        width: '100%',
        items: [
          {
            type: 'rect',
            width: '31%',
          },
          {
            type: 'rect',
            width: '60%',
          },
        ],
      },
    ],
  ];
  const mrowCol = [
    [
      {
        type: 'media',
        border: true,
        items: [
          {
            type: 'circle',
            size: '50px',
          },
          {
            type: 'paragraph',
            width: '100%',
            items: [
              {
                type: 'rect',
                width: '31%',
              },
              {
                type: 'rect',
                width: '60%',
              },
            ],
          },
        ],
      },
    ],
    [
      {
        type: 'media',
        border: true,
        items: [
          {
            type: 'circle',
            size: '50px',
          },
          {
            type: 'paragraph',
            width: '100%',
            items: [
              {
                type: 'rect',
                width: '31%',
              },
              {
                type: 'rect',
                width: '60%',
              },
            ],
          },
        ],
      },
    ],
    [
      {
        type: 'rect',
        margin: '0 0 0 0',
        width: '100%',
        height: '20px',
      },
    ],
    [
      {
        type: 'rect',
        width: '240px',
        margin: '0 32px 0 0',
        height: '20px',
      },
      {
        type: 'rect',
        width: 'calc(100% - 32px - 240px)',
        margin: '0 0 0 0',
        height: '20px',
      },
    ],
    [
      {
        type: 'circle',
        size: '50px',
      },
      {
        type: 'rect',
        margin: '0',
        width: 'calc(100% - 170px)',
        height: '20px',
      },
      {
        type: 'rect',
        marginLeft: '20px',
        width: '80px',
        height: '20px',
        content: '确定',
      },
    ],
    [
      {
        type: 'circle',
        size: '50px',
      },
      {
        type: 'paragraph',
        width: '100%',
        items: [
          {
            type: 'rect',
            width: '61%',
          },
        ],
      },
    ],
    [
      {
        type: 'circle',
        size: '50px',
      },
      {
        type: 'paragraph',
        width: '100%',
        items: [
          {
            type: 'rect',
            width: '31%',
          },
          {
            type: 'rect',
            width: '60%',
          },
        ],
      },
    ],
  ];
  // 模拟骨架屏加载
  const [srowCol, setSrowCol] = useState(rowCol);
  const [sloading, setSloading] = useState(true);
  useEffect(() => {
    setTimeout(() => {
      setSloading(false);
    }, 3000);
  }, [sloading]);
  const wi = () => {
    if (window.innerWidth < 768) {
      setSrowCol(mrowCol);
    }
  };
  useEffect(() => {
    wi();
    window.onresize = () => {
      wi();
    };
    return () => {
      window.onresize = null;
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [true]);
  return (
    <Fragment>
      <Content>
        <Content.Header>骨架屏 Skeleton</Content.Header>
        <Content.Body>
          <Card>
            <Card.Header>基础用法</Card.Header>
            <Card.Body>
              <Skeleton rowCol={data1} loading={sloading}>
                <p>
                  <Text info="我是你需要显示的数据" />
                </p>
                <p>
                  <Text info="我是你需要显示的数据" />
                </p>
              </Skeleton>
            </Card.Body>
          </Card>
          <Card>
            <Card.Header>所有</Card.Header>
            <Card.Body>
              <Skeleton rowCol={srowCol} />
            </Card.Body>
          </Card>
        </Content.Body>
      </Content>
    </Fragment>
  );
}
